<template>
  <div class="app-container" v-loading="loading">
    <div class="flex flex-wrap">
      <div class="flex justify-between w-full p-b-5">
        <div v-if="orderBusinessType.length > 0">
          <el-radio-group
            v-model="queryParams.price"
            class="groupBtn"
            @change="getAdditional"
          >
            <el-radio
              v-for="(item, index) in orderBusinessType"
              :key="index"
              :label="item.value"
              border
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </div>
        <div>
          <el-date-picker
            style="width: 100%"
            v-model="queryParams.dateArr"
            type="daterange"
            range-separator="-"
            value-format="YYYY-MM-DD"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="getAdditional"
          />
        </div>
        <div>
          <el-radio-group
            v-model="queryParams.dateType"
            @change="getAdditional"
          >
            <el-radio-button label="1">近7天</el-radio-button>
            <el-radio-button label="2">近30天</el-radio-button>
            <el-radio-button label="3">近90天</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="h-360px w-full">
        <EcharsLine :lineObj="lineObj" />
      </div>
    </div>
  </div>
</template>
<script setup name="Additional">
import { reactive, toRefs, ref } from 'vue'
import EcharsLine from './line'
import { statisticsAdditional } from '@/api/nztStatistics/index'
const components = shallowRef({
  EcharsLine
})
const { proxy } = getCurrentInstance()
const data = reactive({
  orderBusinessType: [
    { label: '诺账通精益版', value: '300' },
    { label: '诺账通标准版', value: '480' },
    { label: '诺账通畅享版', value: '980' },
    { label: '诺账通增强版', value: '1980' }
  ],
  queryParams: {
    price: '300',
    dateType: '1',
    dateArr: []
  },
  lineObj: {}
})
let { orderBusinessType, queryParams, lineObj } = toRefs(data)
const loading = ref(false)
// 新增人数
function getAdditional() {
  loading.value = true
  statisticsAdditional(queryParams.value)
    .then(res => {
      // tableAdditionalData.value = res.data
      lineObj.value.title = '新增人数'
      lineObj.value.data = res.data.map(e => {
        return {
          name: e.date,
          value: e.num
        }
      })
      console.log(lineObj.value.data)
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}
getAdditional()
</script>
<style lang="scss" scoped>
.el-radio-group.groupBtn :deep(.el-radio__input) {
  display: none;
}
</style>
